<template>
  <div
    id="freqChartComponent"
    class="freq-chart"
  />
</template>

<script>
import echarts from 'echarts'
require('echarts/map/js/china')
export default {
  name: 'FreqChart',

  props: {
    channels: {
      type: Array,
      default () {
        return []
      }
    },
    satellite: {
      type: Object,
      default () {
        return null
      }
    }
  },

  watch: {
    channels () {
      if (this.freqChart) {
        this.createFreqCharts()
      }
    },
    // 当卫星信息变更时，
    satellite () {
      this.createFreqCharts(true)
    }
  },

  data () {
    return {
      freqChart: null
    }
  },

  mounted () {
    let self = this
    self.$nextTick(() => {
      // 初始化渲染echarts
      if (this.freqChart) {
        self.createFreqCharts()
      }
    })
  },

  methods: {
    // 频率段图
    createFreqCharts (update = false) {
      let self = this
      if (self.freqChart === null) {
        self.freqChart = echarts.init(document.getElementById('freqChartComponent'))
      }
      let lineData = []
      let categories = []

      let usingChannels = self.channels
      let satellite = self.satellite

      // 123
      if (satellite) {
        categories.push(satellite.name)
        for (let freqItem of satellite.freq_segments) {
          lineData.push({
            name: satellite.name,
            value: [
              0,
              freqItem.down_freq_begin / 1000,
              freqItem.down_freq_end / 1000
            ],
            itemStyle: {
              normal: {
                color: '#5098ff'
              }
            },
            tooltip: {
              formatter: (params) => {
                // 卫星
                // 波束
                // 转发器
                // 下行起始频点
                // 下行终止频点
                return `${this.$t('message.home.freqChartsCard.chart.tooltip.satellite')}：${params.name},
                        ${this.$t('message.home.freqChartsCard.chart.tooltip.beam')}：${freqItem.beam_name},
                        ${this.$t('message.home.freqChartsCard.chart.tooltip.transponder')}：${freqItem.transponder_name}<br />
                        ${this.$t('message.home.freqChartsCard.chart.tooltip.downFreqBegin')}：${self.$service.miliFormat(freqItem.down_freq_begin / 1000)} KHz,
                        ${this.$t('message.home.freqChartsCard.chart.tooltip.downFreqEnd')}：${self.$service.miliFormat(freqItem.down_freq_end / 1000)} KHz`
              }
            }
          })
        }
      }

      function testNewLine (params, api) {
        let halfWidth = api.size([0, 1])[1] * 0.5
        let yValue = api.value(0)
        let lowXpoint = api.coord([api.value(1), yValue])
        let highXpoint = api.coord([api.value(2), yValue])
        let style = api.style({
          stroke: api.value(3),
          fill: api.value(3),
          lineWidth: 2
        })
        return {
          type: 'bezierCurve',
          shape: {
            x1: lowXpoint[0],
            y1: lowXpoint[1] + halfWidth,
            cpx1: (lowXpoint[0] + highXpoint[0]) / 2,
            cpy1: lowXpoint[1] - halfWidth * 3 + 5,
            x2: highXpoint[0],
            y2: highXpoint[1] + halfWidth
          },
          style: style
        }
      }

      function renderPolygon (params, api) {
        let yValue = api.value(0)
        let lowXpoint = api.coord([api.value(1), yValue])
        let highXpoint = api.coord([api.value(2), yValue])
        let halfWidth = api.size([0, 1])[1] * 0.5
        let style = api.style({
          stroke: '#d2d2d2',
          fill: new echarts.graphic.LinearGradient(
            0, 0, 0, 1,
            [
              { offset: 0, color: '#fff' },
              { offset: 0.3, color: '#83bff6' },
              { offset: 1, color: '#188df0' }
            ]
          )
        })
        let rectShape = echarts.graphic.clipRectByRect({
          x: lowXpoint[0],
          y: lowXpoint[1] - halfWidth,
          width: highXpoint[0] - lowXpoint[0],
          height: 2 * halfWidth
        }, {
          x: params.coordSys.x,
          y: params.coordSys.y,
          width: params.coordSys.width,
          height: params.coordSys.height
        })
        return rectShape && {
          type: 'rect',
          shape: rectShape,
          style: style
        }
      }

      let dataZoomX = [
        {
          type: 'slider',
          xAxisIndex: 0,
          filterMode: 'weakFilter',
          showDataShadow: false,
          bottom: 0,
          left: 0,
          height: 4,
          borderColor: 'transparent',
          backgroundColor: '#e2e2e2',
          labelFormatter: ''
        },
        {
          type: 'inside',
          id: 'insideX',
          xAxisIndex: 0,
          filterMode: 'weakFilter',
          zoomOnMouseWheel: true,
          moveOnMouseMove: true
        }
      ]

      let series = [
        // freqLine
        {
          name: '',
          type: 'custom',
          renderItem: testNewLine,
          itemStyle: {
            normal: {
              opacity: 0.6
            }
          },
          encode: {
            x: [1, 2],
            y: 0
          },
          data: usingChannels,
          animation: false
        },
        // polygon
        {
          name: '',
          type: 'custom',
          itemStyle: {
            normal: {
              color: 'gray',
              opacity: 0.2,
              borderWidth: 1.5
            }
          },
          renderItem: renderPolygon,
          encode: {
            x: [1, 2],
            y: 0
          },
          zlevel: -1,
          data: lineData,
          animation: false
        }
      ]

      let option = {
        tooltip: {
          show: true,
          position: function (pos, params, dom, rect, size) {
            // 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
            let obj = { top: 0 }
            obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5
            return obj
          }
        },
        dataZoom: [
          ...dataZoomX
        ],
        grid: {
          // show: true,
          top: 0,
          left: 0,
          right: 0,
          bottom: 5,
          containLabel: true
        },
        xAxis: {
          min: 'dataMin',
          max: 'dataMax',
          scale: true,
          splitLine: {
            show: false
          },
          axisLabel: {
            formatter: '{value}KHz',
            align: 'left',
            showMaxLabel: false
          }
        },
        yAxis: {
          type: 'category',
          data: categories,
          inverse: true,
          axisLabel: {
            show: false,
            inside: true
          }
        },
        series: series
      }

      if (update === true) {
        self.freqChart.setOption(option)
      } else {
        self.freqChart.setOption(option, { notMerge: true })
      }
    }
  }
}
</script>

<style scoped>
  .freq-chart{
    height: 100%;
  }
</style>
